首页手记【web前端面试题整理05】做几道前端面试题休息休息吧

【web前端面试题整理05】做几道前端面试题休息休息吧

标签：

JavaScript

前言

连续学了两天javascript的东西了，我们都累了，于是今天还是上一套面试题吧，大家一起休息休息，也为下个星期可能会有的面试准备下。

题目一览

CSS
1.  overflow-x  属于 CSS2 还是 CSS3
2.  请列举几种可以清除浮动的方法（至少两种）
3.  display:none  和  visibility:hidden  的区别是什么
4.  请缩写以下代码：
.box {
   background-position: 10px 20px;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-color: red;
   background-image: url(box.png);
}
5.  如何让一段文本中的所有英文单词的首字母大写

Javascript
1.  请解释一下什么是闭包
2.  call 和 apply 的区别是什么
3.  如何使用原生 Javascript 代码深度克隆一个对象（注意区分对象类型）
4.  jQuery 中   $(^{'} . c l a s s^{'}) 和$

$('.class') 和 ('div.class') 在 IE 8 下哪个效率更高，请解释原因 HTML 1. 以下哪个不是 HTML5 的新标签： a.<article> b.<section> c.<address> d.<time> 2. 正确使用 HTML 和 CSS 实现以下效果（中间方框部分表示图片，右侧为文字列表。尽量不要 使用 float 属性）： <ignore_js_op ><img id="aimg_9344" class="zoom" title="未命名.gif" onclick="zoom(this, this.src, 0, 0, 0)" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/images/unknow-80.png" alt="未命名.gif" width="311"> 简答 1. jumei.com 和 weibo.com 完整载入后，html 代码各有多少 KB 2. 最近关注了哪些前端相关的技术/博客/论坛，简述心得和看法既然题目都搞来了，我们就认认真真的做下吧！<h1 id="autoid-3-0-0">overflow-x 属于 CSS2 还是 CSS3我在vs2010上面打到overflow的时候是没有overflow-x的提示，所以果断认为他是CSS3的属性，这个属性是用于控制横向滚动条的。虽说是CSS3提出的属性，但是各个浏览器基本都支持了，所以可以认为是一个标准<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><pre>visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条hidden：不显示超过对象尺寸的内容scroll：横向显示滚动条<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><h1 id="autoid-4-0-0">列举几种可以清除浮动的方法（至少两种）我们前面就说了，说清除浮动不太合理，因为float: none用于表示清楚浮动比较合理，所以我们这里可以改称其为闭合浮动。float会破坏行内框inline boxes导致line boxes高度坍塌，所以我们需要闭合浮动，解决其引起的坍塌闭合浮动只有两种方法：① 添加新标签并为其设置clear: both② 为父元素设置overflow触发器BFC，强制包裹浮动元素我们在网上看到的所以方式都是以上的变形，我们理解以上即可，另外提一提其它的。最经典的就是我们的clearfix了<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><pre> 1 .clearfix:after { 2 content: "."; 3 display: block; 4 height: 0; 5 visibility: hidden; 6 clear: both; 7 } 8 9 .clearfix {10 *zoom: 1;11 }<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码">他这个说白了也是增加新标签的一种变形。<h1 id="autoid-5-0-0">display:none 和 visibility:hidden 的区别这两个家伙区别很大，他们都可以用于隐藏一个元素，但是不同的是：display的方式将使元素脱离文档流，这种做法可能引起页面reflow，对性能不是很好，所以可以避免就避免吧。visibility的方式隐藏了元素，但是他的空间还在。<h1 id="autoid-6-0-0">简写CSS.box { background-position: 10px 20px; background-repeat: no-repeat; background-attachment: fixed; background-color: red; background-image: url(box.png); }<pre>.box { background: red url(box.png) no-repeat 10pz 20px fixed }这个题出10个我都不怕。。。<h1 id="autoid-7-0-0">让一段文本中的所有英文单词的首字母大写这个题我不会，但是应该是CSS3里面一个新特性，最后查询了资料：css的text-transform：none(默认值) | capitalize | uppercase | lowercase |他可以干我们要的事情<h1 id="autoid-8-0-0">什么是闭包这个题基本是必问的，我们既然要作答，就好好答吧！闭包实现原理当某个函数调用时会创建一个执行环境以及作用域链，然后根据arguments和其它命名参数初始化形成活动对象。在外部函数调用结束后，其执行环境与作用域链被销毁，但是其活动对象保存在了闭包之中，最后在闭包函数调用结束后才销毁闭包的实现在函数中定义函数，并且内部函数引用了外部函数的变量，最后内部函数被返回闭包的作用我们的函数可产生类似于块级作用域的东西，内部的变量外部不可访问，但是我们需要提供访问的接口，这个接口的实现便依赖于我们的闭包闭包的问题闭包的使用上需要注意，因为他会增大内存的负担，对性能有一点影响，另外闭包有可能会有一些容易出错的场景。以上便是我对闭包的理解（若是此处要装B应该怎么做呢？）<h1 id="autoid-9-0-0">call 和 apply 的区别是什么call与apply是函数都具有的一个方式，其作用是可以改变其this的指向，其调用方式有所不同。call传递参数，apply以数组形式传递与arguments是一对好基友，建议使用。<h1 id="autoid-10-0-0">深度克隆一个对象昨天才干了这个事情，深度克隆要使用到递归的思想：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><pre> 1 function cloneObj(obj) { 2 var o = obj.constructor == Array ? [] : {}; //首先处理变量，看看是数组还是对象啦 3 for (var k in obj) { 4 //我们知道for in 会将原型的东西也给遍历出来，所以我们这里需要做一个判断 5 if (obj.hasOwnProperty(k)) { 6 //递归方式处理 7 o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k]; 8 } 9 }10 return o;11 }12 13 var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} };14 var b = cloneObj(a);15 var s = '';<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><h1 id="autoid-11-0-0">jQuery 中 <msup><mo stretchy="false">(<mo>′<mo>.<mi>c<mi>l<mi>a<mi>s<msup><mi>s<mo>′<mo stretchy="false">)<mrow class="MJX-TeXAtom-ORD"><mo>和" tabindex="0" id="MathJax-Element-2-Frame" class="MathJax">(′.class′)和<math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mo stretchy="false">(<mo>′<mo>.<mi>c<mi>l<mi>a<mi>s<msup><mi>s<mo>′<mo stretchy="false">)<mrow class="MJX-TeXAtom-ORD"><mo>和<script id="MathJax-Element-2" type="math/tex">('.class') 和 ('div.class') 在 IE 8 下哪个效率更高这个涉及到jquery的优化问题了，我们知道jquery选择器是由右向左找寻的以上是先找寻class的标签，然后在class标签里面找寻只有div的标签，会找两次，应该是后面的高PS：这道题我理解有问题，下来还有再研究一下<h1 id="autoid-12-0-0">HTML5标签1. 以下哪个不是 HTML5 的新标签： a.<article> b.<section> c.<address> d.<time>abd，我写博客时候都用到过，就只有c没有，没法了只能选他了。<h1 id="autoid-13-0-0">布局题<img id="aimg_9344" class="zoom" title="未命名.gif" onclick="zoom(this, this.src, 0, 0, 0)" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/images/unknow-80.png" alt="未命名.gif" width="311">这个题比较简单，是很常见的两列布局，我们一直不推荐使用float，所以用inline-block实现吧：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码"><pre> 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style> 5 .box { border: 1px solid black; width: 360px; height: 180px; } 6 .box img { height: 160px; margin-left: 10px; } 7 .box ul { display: inline-block; *display: inline; zoom: 1; vertical-align: 15px; } 8 </style> 9 </head>10 <body>11 <div class="box">12 <img src="1.png" alt="叶小钗" />13 <ul>14 <li><a href="#">刀狂剑痴叶小钗</a></li>15 <li><a href="#">刀狂剑痴叶小钗</a></li>16 <li><a href="#">刀狂剑痴叶小钗</a></li>17 <li><a href="#">刀狂剑痴叶小钗</a></li>18 <li><a href="#">刀狂剑痴叶小钗</a></li>19 <li><a href="#">刀狂剑痴叶小钗</a></li>20 <li><a href="#">刀狂剑痴叶小钗</a></li>21 <li><a href="#">刀狂剑痴叶小钗</a></li>22 </ul>23 </div>24 </body>25 </html><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img2.sycdn.imooc.com/5acf01ff000151e400200020.jpg" alt="复制代码">具体实现时候一定要上机调试。<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://img1.sycdn.imooc.com/5acf01ff0001d95704180213.jpg" alt=""><h1 id="autoid-14-0-0">结语今天我们又做了一道题，感觉难度不大，最后两道题属于开放型问题，我这里就不作答了，有兴趣他朋友可以留言。若是您有好的题目，请留下再走$

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

别打扰我我要学习

移动开发工程师

手记
篇

粉丝

20

获赞与收藏

131

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 299550 2115

后端通用面试教程

41个小节 28749 323

网络编程入门教程

20个小节 11949 226

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

【web前端面试题整理05】做几道前端面试题休息休息吧

前言

题目一览

阅读免费教程